<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const  option = {
        tooltip : {
          trigger: 'axis'
        },
        legend: {
          data:['最高气温','最低气温'],
          right: '0%',
          icon: 'rect',
          textStyle: {
            color: '#FFF',
            fontSize: 18,
          },
        },
        grid: {
          top: '30%',
          left: '5%',
          right: '15%',
          bottom: '5%',
          containLabel: true,
        },
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
          }
        ],
        yAxis : [
          {
            type : 'value',
            axisLabel : {
              formatter: '{value} °C'
            }
          }
        ],
        series : [
          {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            },
            markLine : {
              data : [
                {type : 'average', name: '平均值'}
              ],
              label:{
                emphasis:{
                  show:true,
                  position:'middle'
                }
              },
              lineStyle: {
                emphasis:{default: "#000"}

              }
            }
          },
          {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
              data : [
                {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
              ]
            },
            markLine : {
              data : [
                {type : 'average', name : '平均值'}
              ]
            }
          }
        ]
      };
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
